<template>
    <div class="login-container">
        <el-card class="login-card">
            <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                <el-tab-pane label="账号登陆" name="first">
                    <AccountLoginComponent></AccountLoginComponent>
                </el-tab-pane>
                <el-tab-pane label="短信登陆" name="second">
                    <SmsLoginComponent></SmsLoginComponent>
                </el-tab-pane>
            </el-tabs>
        </el-card>
    </div>
</template>
    
<script lang="ts" setup>
import { ref } from 'vue'
import type { TabsPaneContext } from 'element-plus'
import AccountLoginComponent from '@/components/login/AccountLoginComponent.vue';
import SmsLoginComponent from '@/components/login/SmsLoginComponent.vue'

const activeName = ref('first')

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}

</script>

<style scoped>
.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.login-card {
    width: 400px;
    padding: 20px;
}

.login-title {
    text-align: center;
    margin-bottom: 20px;
}

.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
</style>